import React from 'react';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { useAuth } from '../contexts/AuthContext';

interface HeaderProps {
  setShowLoginRegister: (show: boolean) => void;
}

const Header: React.FC<HeaderProps> = ({ setShowLoginRegister }) => {
  const { user, logout } = useAuth();
  const router = useRouter();

  const isActive = (pathname: string) => router.pathname === pathname;

  return (
    <header className="bg-gradient-to-r from-sky-400 to-cyan-300 text-white shadow-md">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
        <div className="flex justify-between items-center">
          <h1 className="text-3xl font-bold text-gray-800">证件魔术师</h1>
          <nav className="hidden md:flex space-x-4">
            <Link href="/" className={`px-3 py-2 rounded-md text-sm font-medium transition duration-150 ease-in-out ${
              isActive('/') 
                ? 'bg-white text-cyan-600 shadow-md' 
                : 'text-gray-800 hover:bg-cyan-400 hover:text-white'
            }`}>
              首页
            </Link>
            <Link href="/feedback" className={`px-3 py-2 rounded-md text-sm font-medium transition duration-150 ease-in-out ${
              isActive('/feedback') 
                ? 'bg-white text-cyan-600 shadow-md' 
                : 'text-gray-800 hover:bg-cyan-400 hover:text-white'
            }`}>
              留言板
            </Link>
            {user ? (
              <>
                <span className="px-3 py-2 text-sm font-medium text-gray-800">
                  欢迎，{user.email}
                </span>
                <button 
                  onClick={logout}
                  className="px-3 py-2 rounded-md text-sm font-medium text-gray-800 hover:bg-cyan-400 hover:text-white transition duration-150 ease-in-out"
                >
                  登出
                </button>
              </>
            ) : (
              <button 
                onClick={() => setShowLoginRegister(true)}
                className="px-3 py-2 rounded-md text-sm font-medium bg-white text-cyan-600 hover:bg-cyan-50 transition duration-150 ease-in-out"
              >
                登录/注册
              </button>
            )}
          </nav>
        </div>
      </div>
    </header>
  );
};

export default Header;
